<template>
	<view>
		<view :class="getClass">


			<view class="" :style="'height:'+statusBarHeight+'px'">

			</view>
			<view class="w-100 flex align-center justify-between border" style="height: 90rpx;">
				<view class="flex align-center">
					<free-icon-button @click="back" v-if="showback">&#xe60d;</free-icon-button>
					<text class="font-md ml-3" v-if="title">
						{{title}}
					</text>
					<input type="text" style="width: 650rpx;" @confirm="confirm" class="font-md" v-model="keyword"
						:placeholder="placeholder" v-if="!title">
				</view>
				<view class="flex align-center" v-if="showright">
					<slot name="right">
						<free-icon-button @click="search()">&#xe6e3;</free-icon-button>
						<free-icon-button @click="openExtend">&#xe682;</free-icon-button>
					</slot>

				</view>
			</view>
		</view>
		<!-- 		占位 -->
		<view class="" v-if="fixed" :style="fixedStyle">

		</view>
		<!-- 		扩展菜单 -->
		<free-popup ref="extend" bodyColor="bg-dark" maskColor :bodyWidth="320" :bodyHeight="525">
			<view class="flex flex-column free-animation" style="width:320rpx;height: 525rpx;">

				<view class="flex-1 flex align-center" @click="clickmenu(item.event)" hover-class="bg-hover-dark"
					v-for="item in menus">
					<text class="iconfont font-md pl-3 text-white">{{item.icon}}</text>

					<text class="font-md pl-2 text-white">{{item.name}}</text>
				</view>

			</view>
		</free-popup>
	</view>
</template>

<script>
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	export default {
		props: {
			showback: {
				type: Boolean,
				default: false
			},
			backevent: {
				type: Boolean,
				default: false
			},
			showright: {

				type: Boolean,
				default: false

			},
			keyword: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: '请输入搜索内容'

			},
			title: {
				type: String,
				default: ''
			},
			fixed: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: 'bg-light'

			}
		},
		components: {
			freePopup,
			freeIconButton
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				menus: [{
						name: "发起群聊",
						event: "setTop",
						icon: "\ue633"
					},
					{
						name: "添加好友",
						event: "delChat",
						icon: "\ue65d"
					},
					{
						name: "扫一扫",
						event: "setTop",
						icon: "\ue614"
					},
					{
						name: "收付款",
						event: "delChat",
						icon: "\ue66c"
					},
					{
						name: "帮助与反馈",
						event: "setTop",
						icon: "\ue61c"
					}

				]
			}
		},
		onShow(){
			console.log("onshow")
		},
		onLoad(){
			console.log("onload")
		},
		mounted() {
			console.log(this.title, "title");
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight();
			console.log(this.statusBarHeight);
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`
			},
			getClass() {
				let fixed = this.fixed ? 'fixed-top' : '';
				return `${fixed} ${this.bgColor}`
			},
		},
		methods: {
			back() {
				console.log("bacl")
				console.log(this.backevent, "ba");
				if (!this.backevent) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					this.$emit("backhs")
				}

			},
			confirm(e) {
				this.$emit("confirm", e)

			},
			search() {
				this.$emit("search")
			},
			openExtend() {
				console.log("1233");
				// this.$emit("openExtend")
				this.$refs.extend.show(uni.upx2px(415), uni.upx2px(105))
			},
			clickmenu(item) {
				if(item == 'setTop'){
				uni.navigateTo({
					url:"/pages/mail/mail/mail?type=creategroup"
				})					
				}
				this.$refs.extend.hidden()

			}
		}
	}
</script>

<style>
</style>
